<template>
    <CustomDialogVue :data="dialog" @close="onCloseDialog">
        <template #content>
            <div class="edit-block">
                <div class="basic-info">
                    <el-form
                        ref="ruleFormRef"
                        :inline="true"
                        :model="data.information"
                        :rules="data.rules"
                        label-width="120px"
                    >
                        <el-form-item label="公司名称" prop="company">
                            <div class="info-line">
                                <!-- <el-input v-model="data.information!.company" disabled /> -->
                                <el-select
                                    style="width: 100%"
                                    v-model="data.information.company"
                                    placeholder="请输入选择公司"
                                    clearable
                                    filterable
                                    remote
                                    reserve-keyword
                                    :remote-method="data.remoteMethod"
                                    :loading="data.loading"
                                    @change="data.onSelectCompany"
                                    :disabled="
                                        data.information.type == 'create'
                                            ? data.uStore.companyId == 1
                                                ? false
                                                : true
                                            : true
                                    "
                                >
                                    <el-option
                                        v-for="itemOption in data.companyOptions"
                                        :key="itemOption.id"
                                        :label="itemOption.label"
                                        :value="itemOption.value"
                                    />
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <div class="info-line">
                                <el-input v-model="data.information!.name" placeholder="请输入姓名" clearable />
                            </div>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <div class="info-line">
                                <el-input
                                    type="number"
                                    v-model="data.information!.phone"
                                    placeholder="请输入手机号"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <div class="info-line">
                                <el-input
                                    v-model="data.information!.password"
                                    :type="data.information.type === 'edit' ? 'password' : 'text'"
                                    placeholder="请输入（英文+数字至少8位）"
                                    clearable
                                    @input="data.editPassword"
                                    @focus="data.focusPassword"
                                    @blur="data.blurPassword"
                                />
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="btn">
                <el-button type="primary" @click="comfirm(ruleFormRef)">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </template>
    </CustomDialogVue>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import CustomDialogVue from '@/components/baseDialog/Index.vue'
import { FormInstance } from 'element-plus'
import { H5UserData } from '.'

//接收父级的参数
const props = defineProps(['data'])
//注册父级回调
const emits = defineEmits(['visible'])

const ruleFormRef = ref<FormInstance>()
/**
 * 弹窗数据
 */
const dialog = reactive({
    visible: false,
    title: '定义弹窗变量',
    width: '768px'
})

//初始化数据
const data = reactive(new H5UserData())

watchEffect(() => {
    dialog.visible = props.data.visible
    data.information.companyId = props.data.companyId
    data.information.company = props.data.company
    data.information.type = props.data.type
    dialog.title = props.data.title
    if (props.data.visible && props.data.type === 'edit') {
        data.information.name = props.data.name
        data.information.phone = props.data.phone
        data.information.status = props.data.status
        data.information.userId = props.data.userId
        data.information.password = '        '
    }

    console.log(' props.data', props.data)
})

/**
 * 监听关闭弹窗
 */
const onCloseDialog = () => {
    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
        console.log('reset')
        data.resetData()
    }
    emits('visible')
}

const comfirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(1)
            data.comfirm(() => {
                onCloseDialog()
            })
        } else {
            console.log('error submit！', fields)
        }
    })
}

const cancel = () => {
    onCloseDialog()
}
</script>

<style scoped lang="scss">
.edit-block {
    margin-bottom: 16px;

    .basic-info {
        margin-top: 16px;
    }
}

.edit-title {
    font-size: 18px;
    position: relative;
    padding-left: 8px;
    font-weight: bold;

    &::before {
        content: '';
        display: block;
        width: 2px;
        height: 16px;
        background-color: var(--bg-color-333);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
}

.table-block {
    height: calc(100% - 200px - 100px);
}

.table {
    margin-top: 16px;
    height: calc(100% - 40px);
    border-radius: 4px;

    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--border-color-f1f1f1);

    > div {
        height: 100%;
        overflow-y: auto;
    }
}
.info-line {
    width: 200px;
}
.btn {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
